<template>
    <div >
     
        <ul class="shoplist">
		    <router-link class="shoplist-li" v-for="item in list" :key="item.id" :to="'/shopList/'+shopId+'/details/'+item.id">
                <img :src="item.images[1]" alt=""> 
                <div class="shoplist-title">
                    <div class="title">店铺名称:{{ item.name }}</div>
                    <span class="hidden">电话:{{item.phone}}</span>
                    <span class="hidden">地址:{{  item.address }}</span>
                    <span class="hidden">营业时间:{{item.businessHours}}</span>
                </div>
                <div class="grade">
                    <div class="grade-old">★★★★★</div>
                    <div class="grade-new" :style="{width: item.score + '%'}">★★★★★</div>
                </div>
            </router-link>
	    </ul>
    
    </div>
</template>
<script>
export  default {
    data(){
        return {
            shopId: [],
            list:[],
           
        }
    },
    created(){
       this.shopId = this.$route.params.id       //接收ID
       this.getshopList ()
 
    },
    methods : {
      getshopList (){
          this.$http.get('https://locally.uieee.com/categories/'+this.shopId+'/shops').then(result =>{
                this.list =  result.data
                //console.log(result.data)
          })
      }
    }
}    
</script>
<style lang="scss" scoped>
.shoplist{
    padding: 0;
    margin: 0;
    .shoplist-li{
        position: relative;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        height: 130px;
        padding: 10px 5px;
        list-style: none;
        display: flex;
        justify-content: column;
        flex-wrap: nowrap;
        box-sizing: border-box;
        img{
            width: 100px;
            height: 100px;
        }
        .shoplist-title{
            display: flex;
            flex-direction: column; 
            margin-left: 10px;
             box-sizing: border-box;
            .title{
                font-size: 14px;
                color: #000;
                font-weight: 700;
                width: 150px;
                
            }
            span{
                font-size: 13px;
                color: #6C6C6C;
                line-height: 2;
                width: 230px;
            }
        }
        .grade{
            font-size: 20px;
           
            position: absolute;
            right: 5px;
            top: 10px;;
            .grade-old{
                color: #E3E3E3;
            }
            .grade-new{
                    color: #CB750E;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    overflow: hidden;
            }
        }
    }
}
.hidden{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
